<template>
  <div>
    <a-tabs
      default-active-key="1"
      :active-key="activeKey"
      tabPosition="left"
      :animated="false"
      @tabClick="tabClickPane">
      <a-tab-pane v-for="(d,index) in layoutTypeOptions" :key="index + 1" :tab="d.dictLabel">
        <view-layout-pane
          style="height: 900px"
          ref="viewLayoutPane"
          :case-id="caseId"
          :layout-type="d.dictValue"
          :layout-type-options="layoutTypeOptions"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import ViewLayoutPane from './ViewLayoutPane'
export default {
  name: 'ViewLayout',
  props: {
    caseId: {
      type: Number,
      required: true
    }
  },
  components: {
    ViewLayoutPane
  },
  data () {
    return {
      // 选中面板
      activeKey: 1,
      // 布局类型选项
      layoutTypeOptions: []
    }
  },
  filters: {},
  created () {
    // 酒店类型字典
    this.getDicts('layout_type').then(response => {
      this.layoutTypeOptions.push({ 'dictValue': '0', 'dictLabel': '全部' })
      response.data.forEach(item => this.layoutTypeOptions.push(item))
    })
  },
  mounted () {

  },
  watch: {

  },
  methods: {
    /** 布局面板切换 */
    tabClickPane (key) {
      this.activeKey = key
    }
  }
}
</script>

<style scoped>

</style>
